<template>
  <div class="fwwsbcwh">
    <div v-for="each_bt in btlist">
      <div
        :class="{
          each_bt_div: true,
          each_bt_div_act: each_bt_div_act == each_bt,
        }"
        :style="{
          ...each_bt_divstyle,
          color: each_bt_div_act == each_bt ? getfonttitle() : getfontcontent()

        }"
        @click="btnclick(each_bt)"
      >
        {{ each_bt }}
      </div>
    </div>
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  mixins: [commonmixins],
  name: "leftbuttontaian",
  components: {},
  data() {
    return {
      btlist: ["天气预报", "负荷预测", "能耗分析", "室温检测"],
      each_bt_div_act: "天气预报",
      each_bt_divstyle: {
        fontSize: "50px",
        padding: "5px",
      },
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.each_bt_divstyle.fontSize = this.getscalepxc(17);
    this.each_bt_divstyle.padding = this.getscalepxc(5);
  },
  methods: {
    btnclick(key) {
      console.log(key)
      console.log(this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions)
      if (key === '天气预报') {
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.bordertitle = '未来七天天气预报';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.borderunit = '（℃）';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].componentDetail.type = 'SevendayForcastTaian';
      } else if (key === '负荷预测') {
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.bordertitle = '负荷预测';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.borderunit = '';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].componentDetail.type = 'fuheyuceTaian';
      } else if (key === '能耗分析') {
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.bordertitle = '能耗分析';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.borderunit = '';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].componentDetail.type = 'nenghaofenxiTaian';
      } else if (key === '室温检测') {
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.bordertitle = '室温检测';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].borderOptions.borderunit = '';
        this.$root.setting.data.rows[1].topblocks[1].middleblocks[3].blocks[0].componentDetail.type = 'shiwenTaian';
      }
      this.$root.setting.data
      this.each_bt_div_act = key;
      this.$message.success(key)
    },
  },
};
</script>
<style lang='scss' scoped>
.each_bt_div {
  // padding: 5px;
  background-image: url("/configuration/2d/lbtnn.png");
  // width: 100%;
  // height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  // color: #ffffff;
  &:hover {
    // color: red!important;
    color: #77D2FF!important;
  }
}
.each_bt_div_act {
  // padding: 5px;
  background-image: url("/configuration/2d/lbtna.png");
  // width: 100%;
  // height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  // color: #ffffff;
  &:hover {
    color: #77D2FF;
  }
}
</style>